
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">角色</span>
    <el-button type="primary" @click="beforeAddUser"
               style="float: right;margin-top:10px;">新增角色</el-button>
  </div>
  <!-- 新建角色弹窗 -->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding:40px;"
      v-model="dialogVisible">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入角色名称" v-model="role.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="权限选择">
            <el-select placeholder="请选择权限" v-model="role.enable
">
              <el-option v-for="item in leaderOptions" :label="item.power" :value="item.id"  ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col>
        <el-col >
          <el-form-item label="角色描述">
            <el-input placeholder="请输入角色描述" style="width: 100%;" v-model="role.describe"></el-input>
          </el-form-item>
        </el-col>
      </el-col>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </template>
  </el-dialog>
  <!-- 角色搜索卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索" style="width: 220px;">
        <el-input placeholder="请输入角色名"
                  v-model="searchRoleForm.name" @keydown.enter="loadRole"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadRole">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>


  <!-- 新增角色数据表格卡片 -->
  <!-- 角色数据表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="roleTable">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column label="用户名" prop="name" align="center"></el-table-column>
      <el-table-column label="权限" prop="enable" align="center"></el-table-column>
      <el-table-column label="开始日期" prop="startDate" align="center"></el-table-column>
      <el-table-column label="结束日期" prop="endDate" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="editRole(scope.row)">编辑</el-button>
          <el-button link type="primary" :disabled="scope.row.level==40"
                     @click="deleteRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs, {parse} from "qs";
import {ElMessage} from "element-plus";

//页面一加载完毕,立即调用加载角色的方法
onMounted(()=>{
  loadRole();
})
//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
const dialogTitle=ref("新建角色");


//定义数组用来保存数据
const role=ref({
  id:'',
  enable:'',
  describe:'',
  name:'',
})

//定义数组来维护员工直属领导的数据
const leaderOptions = ref([
  {power:'管理员',id:'2'},
  {power:'保安',id:'1'}

]);
//定义数组用来保存用户表格数据
const roleTable= ref([
]);
//点击新增角色
const beforeAddUser=()=>{
  dialogVisible.value=true;
  dialogTitle.value='新增角色';

}

//点击取消按钮关闭新增用户弹窗
const cancel=()=>{
  //关闭弹窗
  dialogVisible.value=false;
  //清空弹窗中的数据
  role.value={};

  //定义对象用来保存搜索卡片的角色搜索条件
}
const searchRoleForm = ref({name:''});
//定义加载数据
const loadRole=()=>{
   let data=qs.stringify(searchRoleForm.value);
   console.log(data);
   //有条件就根据条件加载,没有条件就查询所有
  axios.get(BASE_URL+'/v1/role/select?'+data).then((response)=>{
    if (response.data.code===2000){
      roleTable.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//定义重置按钮的方法
const resetSearch=()=>{
  searchRoleForm.value={};
  //重新加载用户数据
  loadRole();
}
//点击保存按钮新增用户
const save=()=>{
//测试代码写后端时删除
  console.log(role.value);
 let data= qs.stringify(role.value);
  axios.post(BASE_URL+'/v1/role/add',data).then((response)=>{
    if (response.data.code===2000){
      if (dialogTitle.value==='新增角色'){ElMessage.success("新增成功");}
      if (dialogTitle.value==='编辑角色'){ElMessage.success("编辑成功");}
      //关闭弹窗
      dialogVisible.value=false;
      //重新加载数据
      loadRole();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
//点击角色编辑的按钮
const editRole=(row)=>{
  console.log(row)
  role.value=row;
  dialogVisible.value=true;
  dialogTitle.value='编辑角色';}
//删除按钮的实现
const deleteRole=(id)=>{
  if (confirm('确定要删除吗？')){
    axios.post(BASE_URL+'/v1/role/delete/'+id).then((response)=>{
      if (response.data.code===2000){
        ElMessage.success("删除成功");
        loadRole();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }

}
</script>

<style scoped>

</style>